<template>
	<div class="home">

		<div class="home__con">
			<div ref="form" style="display: flex;align-items: center;justify-content: space-between;">
				<div style="padding-right: 300px;display: flex;align-items: center;flex-wrap: wrap;">
					<el-input placeholder="" suffix-icon="el-icon-date" v-model="form.value1">
						<template slot="prepend">报表 ：</template>
					</el-input>
					<el-input placeholder="" suffix-icon="el-icon-date" v-model="form.bh">
						<template slot="prepend">部门 :</template>
					</el-input>
					<el-input placeholder="" suffix-icon="el-icon-date" v-model="form.ys">
						<template slot="prepend">颜色 :</template>
					</el-input>
					<el-input placeholder="" suffix-icon="el-icon-date" v-model="form.cm">
						<template slot="prepend">尺码 :</template>
					</el-input>
					<div class="mb">
						<el-button type="primary" plain>确认</el-button>
					</div>
				</div>
				<div class="mb" style="display: flex;align-items: center;">
					<el-checkbox label="显示返工情况"></el-checkbox>
					<div style="width: 20px;"></div>
					<el-button type="primary" plain>右击补工票</el-button>
				</div>

				<!-- <div class="bz">
					<el-input placeholder="" v-model="form.bh">
						<template slot="prepend">备注 :</template>
					</el-input>
				</div> -->
			</div>
			<el-table border :data="tableData" stripe style="width: 100%" :height="`calc(22%)`"
				:header-cell-style='{background:"#F9F9F9",color:"#1F163A",textAlign:"center"}'
				:cell-style="{color:'#1F163A',textAlign:'center'}">
				<el-table-column prop="h" label="行" width="76">
				</el-table-column>
				<el-table-column prop="cjrq" label="裁剪日期" width="100">
				</el-table-column>
				<el-table-column prop="ddh" label="订单号" width="100">
				</el-table-column>
				<el-table-column prop="cpmc" label="产品名称" width="230">
				</el-table-column>
				<el-table-column prop="ch" label="床号" width="70">
				</el-table-column>
				<el-table-column prop="scs" label="生产商" width="60">
				</el-table-column>
				<el-table-column prop="zxs" label="总箱数" width="100">
				</el-table-column>
				<el-table-column prop="zsl" label="总数量" width="100">
				</el-table-column>
				<el-table-column prop="djh" label="单据号" width="180">
				</el-table-column>
				<el-table-column prop="bm" label="部门" width="180">
				</el-table-column>
				<el-table-column prop="bz" label="备注">
				</el-table-column>
				<el-table-column prop="app" label="APP控制">
				</el-table-column>
				<el-table-column prop="ch" label="床号" width="70">
				</el-table-column>
				<el-table-column prop="scs" label="生产商" width="60">
				</el-table-column>
				<el-table-column prop="zxs" label="总箱数" width="100">
				</el-table-column>
				<el-table-column prop="zsl" label="总数量" width="100">
				</el-table-column>
				<el-table-column prop="djh" label="单据号" width="180">
				</el-table-column>
				<el-table-column prop="bm" label="部门" width="180">
				</el-table-column>
				<el-table-column prop="bz" label="备注">
				</el-table-column>
				<el-table-column prop="bm" label="部门" width="180">
				</el-table-column>
			</el-table>
			<!-- <div class="hj"
				style="height: 49px;background: #F9F9F9;display: flex;align-items: center;justify-content: flex-end;color: #1F163A;">
				合计：件数26 差额0
			</div> -->
			<!-- <div class="footer" ref="footer">
				<div>
					总共2 条记录
				</div>
				<el-pagination background small layout="prev, pager, next,jumper" :total="328">
				</el-pagination>
			</div> -->

			<div class="bottom" :style="{height:`calc(78% - ${formH}px)`}">
				<div class="bottom__left">
					<div ref="leftTop">
						<div style="display: flex;align-items: center;justify-content: flex-start;padding-top: 10px;">
							<el-input placeholder="" v-model="value1">
								<template slot="prepend">日期 :</template>
							</el-input>
							<el-input placeholder="" v-model="value2">
								<template slot="prepend">日期 :</template>
							</el-input>
						</div>
					</div>
					<el-table border :data="tableData1" stripe style="width: 100%" :height="`calc(100% - ${52}px)`"
						:header-cell-style='{background:"#F9F9F9",color:"#1F163A",textAlign:"center"}'
						:cell-style="{color:'#1F163A',textAlign:'center',padding:0,height:'50px'}">
						<el-table-column prop="zh" label="扎号" width="60">
						</el-table-column>
						<el-table-column prop="gxm" label="唯一码" width="100">
						</el-table-column>
						<el-table-column prop="gh" label="码标" width="100">
						</el-table-column>
						<el-table-column prop="wgr" label="颜色" width="60">
						</el-table-column>
						<el-table-column prop="cf" label="颜色" width="80">
						</el-table-column>
						<el-table-column prop="sl" label="数量" width="60">
						</el-table-column>

						<div slot="append" style="display:flex;flex-wrap: wrap;">
							<div class="footeritem" style="height: 49px;">
								<div style="width: 60px;">已完成</div>
								<div style="width: 100px;"></div>
								<div style="width: 100px;"></div>
								<div style="width: 60px;"></div>
								<div style="width: 80px;"></div>
								<div style="width: 60px;">26</div>
							</div>
							<div class="footeritem" style="height: 49px;background-color: #fff;">
								<div  style="width: 60px;">未完成</div>
								<div style="width: 100px;"></div>
								<div style="width: 100px;"></div>
								<div style="width: 60px;"></div>
								<div style="width: 80px;"></div>
								<div  style="width: 60px;">0</div>
							</div>
							<div class="footeritem" style="height: 49px;">
								<div  style="width: 60px;">完成率</div>
								<div style="width: 100px;"></div>
								<div style="width: 100px;"></div>
								<div style="width: 60px;"></div>
								<div style="width: 80px;"></div>
								<div  style="width: 60px;">100%</div>
							</div>
						</div>
					</el-table>
				</div>
				<div class="bottom__right">
					<div style="height: 52px;">
						<!-- <div style="display: flex;align-items: center;justify-content: flex-start;padding-top: 10px;">
							<el-input placeholder="" v-model="value1">
								<template slot="prepend">日期 :</template>
							</el-input>
							<el-input placeholder="" v-model="value2">
								<template slot="prepend">日期 :</template>
							</el-input>
						</div> -->
					</div>
					<el-table border :data="tableData2" stripe style="width: 100%" :height="`calc(100% - 52px)`"
						:header-cell-style='{background:"#F9F9F9",color:"#1F163A",textAlign:"center"}'
						:cell-style="{color:'#1F163A',textAlign:'center',padding:0,height:'50px'}">
						<el-table-column prop="yi" label="0" width="95">
						</el-table-column>
						<el-table-column prop="er" label="0" width="95">
						</el-table-column>
						<el-table-column prop="san" label="0" width="95">
						</el-table-column>
						<el-table-column prop="si" label="0" width="95">
						</el-table-column>
						<el-table-column prop="wu" label="0" width="95">
						</el-table-column>
						<el-table-column prop="yi" label="0" width="95">
						</el-table-column>
						<el-table-column prop="er" label="0" width="95">
						</el-table-column>
						<el-table-column prop="san" label="0" width="95">
						</el-table-column>
						<el-table-column prop="si" label="0" width="95">
						</el-table-column>
						<el-table-column prop="wu" label="0" width="95">
						</el-table-column>
						<el-table-column prop="yi" label="0" width="95">
						</el-table-column>
						<el-table-column prop="er" label="0" width="95">
						</el-table-column>
						<el-table-column prop="san" label="0" width="95">
						</el-table-column>
						<el-table-column prop="si" label="0" width="95">
						</el-table-column>
						<el-table-column prop="wu" label="0" width="95">
						</el-table-column>
						<el-table-column prop="yi" label="0" width="95">
						</el-table-column>
						<el-table-column prop="er" label="0" width="95">
						</el-table-column>
						<el-table-column prop="san" label="0" width="95">
						</el-table-column>
						<el-table-column prop="si" label="0" width="95">
						</el-table-column>
						<el-table-column prop="wu" label="0" width="95">
						</el-table-column>
						<div slot="append" style="display:flex;flex-wrap: wrap;">
							<div class="footeritem1" style="height: 49px;padding: 0;display: flex;">
								<div style="width: 95px;text-align: center;" v-for="(item,index) in 20" :key="index">0
								</div>
							</div>
							<div class="footeritem1" style="height: 49px;padding: 0;display: flex;">
								<div style="width: 95px;text-align: center;" v-for="(item,index) in 20" :key="index">26
								</div>
							</div>
							<div class="footeritem1" style="height: 49px;padding: 0;display: flex;">
								<div style="width: 95px;text-align: center;" v-for="(item,index) in 20" :key="index">0%
								</div>
							</div>
						</div>


					</el-table>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				value1: "2024-03-09",
				value2: '455-GD99#',
				form: {
					value1: '2024-03-09',
					bh: '所有部门',
					ys: '所有颜色',
					cm: '所有尺码'
				},
				btnlist: [{
					text: '批量调整'
				}, {
					text: '删除条码'
				}, {
					text: '生产流水'
				}, {
					text: '打印纸菲'
				}, {
					text: '内部码'
				}, {
					text: '定义列名'
				}, {
					text: '汇总情况'
				}, {
					text: '生成仓库单'
				}, {
					text: '发送加工'
				}, {
					text: '加工进度'
				}, {
					text: '完工推送*0 '
				}, {
					text: '调生产通知单'
				}, ],
				tableData: [{
						h: 1,
						cjrq: '2024-03-09',
						ddh: 'GD99-4',
						cpmc: "GD99-4",
						ch: 455,
						scs: 40101,
						zxs: 14,
						zsl: '2',
						djh: "1000002302",
						bm: "新厂隔壁3楼(贴朋)",
						bz: '无',
						app: '无'
					},
					{
						h: 1,
						cjrq: '2024-03-09',
						ddh: 'GD99-4',
						cpmc: "GD99-4",
						ch: 455,
						scs: 40101,
						zxs: 14,
						zsl: '2',
						djh: "1000002302",
						bm: "新厂隔壁3楼(贴朋)",
						bz: '无',
						app: '无'
					},
					{
						h: 1,
						cjrq: '2024-03-09',
						ddh: 'GD99-4',
						cpmc: "GD99-4",
						ch: 455,
						scs: 40101,
						zxs: 14,
						zsl: '2',
						djh: "1000002302",
						bm: "新厂隔壁3楼(贴朋)",
						bz: '无',
						app: '无'
					},
				],
				tableData1: [{
						sl: 14,
						gxm: "131393",
						gh: '2302-1',
						wgr: "黑色",
						cf: 'M/34',
						zh: 1
					},
					{
						sl: 14,
						gxm: "131393",
						gh: '2302-1',
						wgr: "黑色",
						cf: 'M/34',
						zh: 1
					},
					{
						sl: 14,
						gxm: "131393",
						gh: '2302-1',
						wgr: "黑色",
						cf: 'M/34',
						zh: 1
					},
					{
						sl: 14,
						gxm: "131393",
						gh: '2302-1',
						wgr: "黑色",
						cf: 'M/34',
						zh: 1
					},
					{
						sl: 14,
						gxm: "131393",
						gh: '2302-1',
						wgr: "黑色",
						cf: 'M/34',
						zh: 1
					},
					{
						sl: 14,
						gxm: "131393",
						gh: '2302-1',
						wgr: "黑色",
						cf: 'M/34',
						zh: 1
					},
					
				],
				footerh: 67,
				formH: 42,
				lefttopheight: 0,
				tableData2: [{
						yi: '990|不开通权限首序',
						er: '1424|点胶',
						san: '1715冲床-果冻部完工',
						si: '1109吸花面',
						wu: '1651印标',
					},
					{
						yi: '990|不开通权限首序',
						er: '1424|点胶',
						san: '1715冲床-果冻部完工',
						si: '1109吸花面',
						wu: '1651印标',
					},
					{
						yi: '990|不开通权限首序',
						er: '1424|点胶',
						san: '1715冲床-果冻部完工',
						si: '1109吸花面',
						wu: '1651印标',
					},
					{
						yi: '990|不开通权限首序',
						er: '1424|点胶',
						san: '1715冲床-果冻部完工',
						si: '1109吸花面',
						wu: '1651印标',
					}, 
				],
			}
		},
		created() {
			// this.
		},
		mounted() {
			// let height = this.$refs.mian__top.offsetHeight; //100
			this.mainTopheight = this.$refs.mian__top.offsetHeight
			this.lefttopheight = this.$refs.leftTop.offsetHeight
			let _this = this
			window.onresize = function() {
				_this.mainTopheight = _this.$refs.mian__top.offsetHeight
				_this.lefttopheight = _this.$refs.leftTop.offsetHeight
				// console.log(_this.lefttopheight)
			};

		},
		// mounted() {


		// 	this.footerh = this.$refs.footer.offsetHeight
		// 	this.formH = this.$refs.form.offsetHeight
		// 	console.log(this.formH)
		// 	let _this = this
		// 	window.onresize = function() {
		// 		_this.formH = _this.$refs.form.offsetHeight
		// 		// console.log(_this.$refs.form.offsetHeight)
		// 	};
		// },
	}
</script>
<style scoped>
	.home {
		background-color: #fff;
		height: calc(100% - 26px);
		border-radius: 5px;
		padding: 13px 10px;

	}

	.home__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.home__top__btn {
		cursor: pointer;
		padding: 0 18px;
		height: 50px;
		line-height: 50px;
		background-color: rgba(74, 119, 246, .5);
		color: #231918;
		font-size: 15px;
		margin-right: 1px;
	}

	.home__con {
		margin-top: 10px;
		height: 100%
	}

	.box {
		width: 60px;
		height: 22px;
		border-radius: 3px;
		text-align: center;
		line-height: 22px;
		color: #fff;
	}

	.footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #1F163A;
		padding: 24px 48px;
	}

	.bz {
		display: flex;

	}

	.hj {
		font-size: 19px;
		padding-right: 40px;
	}

	/deep/.el-input__inner {
		width: 135px;
		padding-left: 10px;
	}

	.el-input {
		width: fit-content;
		margin-right: 20px;
		margin-bottom: 20px;
	}

	/deep/.el-input-group__prepend {
		padding: 0 10px;
	}

	/deep/.el-input__icon {
		width: 20px;
	}

	/deep/.el-input--suffix .el-input__inner {
		padding-right: 20px;
	}

	/deep/.bz .el-input {
		width: 100%;
		display: flex;
		/* padding-left: 10px; */
	}

	/deep/.bz .el-input .el-input__inner {
		width: 100%;
	}

	/deep/.bz .el-input .el-input-group__prepend {
		width: fit-content;
		display: flex;
		align-items: center;
	}

	.bz {
		display: flex;
		flex: 1;
	}

	.mb {
		margin-bottom: 20px;
	}

	.bottom {
		display: flex;
		align-items: center;
	}

	.bottom__left {
		width: 24%;
		height: 100%;
		/* background-color: aliceblue; */
		margin-right: 1%;
	}

	.bottom__right {
		width: 75%;
		height: 100%;
		/* background-color: antiquewhite; */
	}
	.footeritem1 {
		
		background: #F9F9F9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 18px;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #1F163A;
	}
	.footeritem {
		/* width: calc(100% - 18px - 18px); */
		/* width: 100%; */
		background: #F9F9F9;
		display: flex;
		align-items: center;
		justify-content: space-between; 
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #1F163A;
		text-align: center;
	}
</style>